<template>
	<view class="setting">
		<view class="row">
			<view class="label">名称</view>
			<view class="right">
				<input type="text" v-model="name" placeholder="请输入店铺名称" />
			</view>
		</view>
		
		<view class="row">
			<view class="label">图标</view>
			<view class="right logo">
				<image :src="logo_img" mode="" @tap="uploadImg('logo')"></image>
			</view>
		</view>
		
		
		<view class="row">
			<view class="label">广告</view>
			
		</view>
		
		<view class="ad">
			<view class="item" v-for="(img, index) in imgSrc" :key="index">
				<view class="iconfont icon-shanchu1" @tap="delImg(index)"></view>
				<image :src="img" mode="aspectFill"></image>
			</view>
			
			<view class="item upload" @tap="uploadImg('ad')">
				<image src="../../static/upload_icon.png" mode=""></image>
			</view>
		</view>
		
		<view class="fixed-bottom-btn" @tap="save()">保存设置</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	
	export default {
		data() {
			return {
				logo_img: '/static/upload_icon.png',
				imgSrc: [],
				img_index: '',
				name: '',
			};
		},
		onLoad() {
			this.getDetail();
		},
		methods: {
			//获取订单详情
			getDetail: function(){
				var that = this;
				var url =  'usershop/getShopInfo';
				
				Request.send({
					url: url,
					sCallback: function(res) {
						if(res.data) {
							that.name = res.data.name;
							that.logo_img = res.data.logo_image ? res.data.logo_image: '/static/upload_icon.png';
							that.imgSrc = res.data.imgSrc? res.data.imgSrc: [];
						}
					}
				});
			},
			//提交评价
			save: function(){
				var that = this;

				var data = {
					name: this.name,
					logo_image: this.logo_img,
					ad_images: this.imgSrc.toString(),
				}

				if(!data.name) {
					Request.alert('请输入店铺名称');return;
				}

				if(!data.logo_image) {
					Request.alert('请上传店铺LOGO');return;
				}

				if(!data.ad_images) {
					Request.alert('请上传广告图片');return;
				}
		
				Request.send({
					url: 'usershop/setShopInfo',
					data: data,
					sCallback: function(res) {
						uni.showToast({
							title: res.msg,
							success() {
								uni.navigateBack({
									
								})
							}
						})
					}
				})
				
			},
			//上传图片
			uploadImg: function(img_type) {
				
				if(img_type == 'ad' && this.imgSrc.length >= 3) {
					Request.alert('最多上传3张');
					return;
				}
				
				var that = this;
				
				uni.chooseImage({
					count:1,
					sizeType: ['compressed'],
					success(obj) {
						console.log(obj);
						Request.uploadImg({
							data: obj.tempFilePaths[0],
							sCallback: function(res) {
								if(img_type == 'ad') {
									that.imgSrc.push(res.data.url);
								} else {
									that.logo_img = res.data.url;
								}
								
							}
						})
					},
					fail(e) {
						console.log('err');
						console.log(e);
						Request.alert('图片选择出错');
					}
				})
				
			},
			//删除上传的图片
			delImg: function(index){
				this.imgSrc.splice(index, 1);
			}	
		}
	}
</script>

<style>
	page{
		background: #fff;
		font-size: 28upx;
	}
	
	.setting{
		border-top: 1upx solid #eee;
	}
	
	.setting .row{
		display: flex;
		flex-direction: row;
		min-height: 80upx;
		align-items: center;
		border-bottom: 1upx solid #eee;
	}
	
	.setting .row .label{
		width: 100upx;
		text-align: center;
	}
	
	.setting .logo image{
		width: 200upx;
		height: 200upx;
	}
	
	.setting .ad{
		display: flex;
		flex-wrap: wrap;
		width: 750upx;
	}
	
	.setting .ad .item{
		position: relative;
		width: 187.5upx;
		height: 187.5upx;
		display: flex;
		justify-content: center;
		padding: 10upx 0;
	}
	
	.setting .ad .item .iconfont{
		position: absolute;
		top: -20upx;
		right: 0upx;
		font-size: 40upx;
		opacity: 0.7;
	}
	
	.setting .ad .item image{
		max-width: 137.5upx;
		max-height: 137.5upx;
	}
</style>
